<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010608滕旋州</title>
    <link rel="stylesheet" href="./my.css">
    <link rel="stylesheet" href="./tengxuanzhou.css">
    <style>
        body, div, a, ul, li, span, p {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #F7F7F7;
            color: #333;
        }
        
        
    </style>
</head>
<body>
    <div class="txzheader">
        <div>
            <img src="./img/屏幕截图 2024-12-10 144314.png" alt="Logo">
            <a href="./index.html">虎扑首页</a>
            <a href="#">NBA</a>
            <a href="./setting.html">设置</a>
            <a href="./index22.html">步行街</a>
        </div>
        <div>
            <a href="#">登录</a> | <a href="#">注册</a>
        </div>
    </div>
    <div class="txzprofile-section" id="txzprofile-section">
        <!-- 动态渲染个人信息 -->
    </div>
    <div class="txztabs">
        <ul id="tab-menu">
            <li class="active">发帖</li>
            <li>回帖</li>
            <li>推荐</li>
            <li>收藏</li>
            <li>关注</li>
        </ul>
        <div id="tab-content">
            <div class="tab-content">
                <img src="./img/屏幕截图 2024-12-10 135853.png" alt="暂无内容">
                <p>暂无数据 去其他地方看看</p>
            </div>
        </div>
    </div>
    <div class="txzfooter">
        <p>虎扑首页 | 服务协议 | 隐私政策</p>
        <p>Copyright © 2024 虎扑 All Rights Reserved</p>
    </div>

    <script>
        // JSON 数据
        const txzprofileData = {
            username: "虎扑JR1696871800",
            joinDays: 7,
            stats: {
                following: 0,
                followers: 0,
                likes: 0,
                recommendations: 0
            },
            avatar: "./img/屏幕截图 2024-12-10 144314.png"
        };

        // 渲染个人信息
        const txzprofileSection = document.getElementById('txzprofile-section');
        function rendertxzprofile() {
            txzprofileSection.innerHTML = `
                <div class="txzprofile-info">
                    <img src="${txzprofileData.avatar}" alt="头像">
                    <h2>${txzprofileData.username}</h2>
                    <p>加入虎扑${txzprofileData.joinDays}天</p>
                </div>
                <div class="txzprofile-stats">
                    <div>
                        <h3>${txzprofileData.stats.followers}</h3>
                        <p>关注我的</p>
                    </div>
                    <div>
                        <h3>${txzprofileData.stats.following}</h3>
                        <p>我关注的</p>
                    </div>
                    <div>
                        <h3>${txzprofileData.stats.likes}</h3>
                        <p>被点赞</p>
                    </div>
                    <div>
                        <h3>${txzprofileData.stats.recommendations}</h3>
                        <p>被推荐</p>
                    </div>
                </div>
            `;
        }

        // Tab 切换功能
        const txztabs = document.querySelectorAll("#tab-menu li");
        const tabContent = document.getElementById("tab-content");

        txztabs.forEach((tab) => {
            tab.addEventListener("click", () => {
                document.querySelector("#tab-menu li.active").classList.remove("active");
                tab.classList.add("active");
                tabContent.innerHTML = `
                    <div class="tab-content">
                        <img src="./img/屏幕截图 2024-12-10 135853.png" alt="暂无内容">
                        <p>暂无数据 去其他地方看看</p>
                    </div>
                `;
            });
        });

        // 初始化渲染
        rendertxzprofile();
    </script>
</body>
</html>
